<!--
 * @Description: 
 * @Author: hrc
 * @Date: 2024-12-17 16:28:59
 * @LastEditors: HuRrongChao 1556810922@qq.com
 * @LastEditTime: 2025-01-18 16:24:13
-->
<template>
  <div class="capture-box" ref="containerRef">
    <img class="capture-box__bgimg" :src="props.url" v-show="props.url" :style="{width: imgWdith + 'px', height: imgHeight + 'px'}">
    <img
      ref="imgRef"
      v-show="props.url"
      :src="props.url"
      class="capture-box__cutimg"
      @load="initContainer"
      :style="{
        width: imgWdith + 'px', height: imgHeight + 'px',
        clipPath: `polygon(${currentLeft}px ${currentTop}px, ${currentLeft + cutBoxWdith}px ${currentTop}px,  ${currentLeft + cutBoxWdith}px ${currentTop + cutBoxHeight}px, ${currentLeft}px ${currentTop + cutBoxHeight}px)`
        }">
    <div
      v-show="props.url"
      class="capture-box__cutbox"
      ref="cutBoxRef"
      :style="{width: `${cutBoxWdith}px`, height: `${cutBoxHeight}px`, top: `${currentTop}px`, left: `${currentLeft}px`}"
      @mousedown="handleBoxMove">
      <div class="capture-box--corner topleft" style="cursor:nw-resize;" data-name="topLeft"></div>
      <div class="capture-box--corner topright" style="cursor:ne-resize;" data-name="topRight"></div>
      <div class="capture-box--corner bottomright" style="cursor:se-resize;" data-name="bottomRight"></div>
      <div class="capture-box--corner bottomleft" style="cursor:sw-resize;" data-name="bottomLeft"></div>
      <div class="capture-box--middle topmiddle" style="cursor:n-resize;" data-name="topMiddle"></div>
      <div class="capture-box--middle bottommiddle" style="cursor:s-resize;" data-name="bottomMiddle"></div>
      <div class="capture-box--middle leftmiddle" style="cursor:w-resize;" data-name="leftMiddle"></div>
      <div class="capture-box--middle rightmiddle" style="cursor:e-resize;" data-name="rightMiddle"></div>
    </div>
  </div>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import { useBoxMove } from './hooks/useBoxMove'
import { useInit } from './hooks/useInit'
const props = defineProps({
  url: {
    type:String,
    default: ''
  },
  defaultCutBoxWdith: {
    type:String,
    default: '20%'
  },
  defaultCutBoxHeight: {
    type:String,
    default: '20%'
  }
})

const containerRef = ref() // 容器
const cutBoxRef = ref() // 裁剪框
const imgRef = ref() // 图片

const {
  currentTop,
  currentLeft,
  cutBoxWdith,
  cutBoxHeight,
  handleBoxMove
} = useBoxMove(containerRef, cutBoxRef)

const {
  imgWdith,
  imgHeight,
  zoom,
  resizeCutBox,
  initContainer,
  translatePX
} = useInit(containerRef, cutBoxRef, imgRef, currentTop, currentLeft)

// 保存
const saveImage = () => {
  return new Promise((resolve) => {
    const cv = document.createElement('canvas')
    cv.width = cutBoxWdith.value / zoom.value
    cv.height = cutBoxHeight.value / zoom.value
    const ctx = cv.getContext('2d')
    
    ctx.drawImage(
      imgRef.value,
      currentLeft.value / zoom.value,
      currentTop.value / zoom.value,
      cutBoxWdith.value / zoom.value,
      cutBoxHeight.value / zoom.value,
      0,
      0,
      cutBoxWdith.value / zoom.value,
      cutBoxHeight.value / zoom.value
    )

    cv.toBlob((blob) => {
      const url = URL.createObjectURL(blob)
      resolve({ blob, url, width: cutBoxWdith.value / zoom.value, height: cutBoxHeight.value / zoom.value })
    }, 'image/jpeg')
  })
}

onMounted(() => {
  const { width, height } = translatePX(props.defaultCutBoxWdith, props.defaultCutBoxHeight)
  cutBoxWdith.value = width
  cutBoxHeight.value = height
})

defineExpose({
  saveImage
})
</script>

<style lang="scss" scoped>
@use './captureImage.scss';
</style>